<template>
  <div>
    <div :class="['body_content',isfixed? 'tabs_fixed':'']" style="margin-bottom: 0px">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基础信息" name="first"></el-tab-pane>
        <el-tab-pane label="视频内容" name="second"></el-tab-pane>
        <el-tab-pane label="相关设置" name="third"></el-tab-pane>
      </el-tabs>
    </div>
   
    <el-form
      ref="ruleForm"
      id="fileupload"
      method="POST"
      :rules="rules"
      enctype="multipart/form-data"
      :model="ruleForm"
      :class="['instrument-edit-ruleForm',isfixed?'mt75':'']"
      label-width="166px"
    >
    <div id="first" class="target-fix" />
      <div class="essentialInformation">
        <p class="essentialInformation_text">基本信息</p>
        <div class="form">
          <el-form-item label="视频名称:" prop="title">
            <el-input
              v-model="ruleForm.title"
              maxlength="40"
              show-word-limit
              placeholder="请输入视频名称"
              class="w350"
              size="small"
            />
          </el-form-item>
          <el-form-item label="视频类型:">
            <span style="padding-top: 3px;display: inline-block;">{{ zzupload }}</span>
          </el-form-item>
          <el-form-item label="视频简介:" prop="videoIntroduction">
            <el-input
              v-model="ruleForm.videoIntroduction"
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 5 }"
              maxlength="200"
              show-word-limit
              placeholder="请输入视频名称"
              class="w480"
              size="small"
            />
          </el-form-item>
          <el-form-item label="产品分类:" prop="sort22">
            <span class="list_body">
              <el-button
                class="list-item"
                v-for="(item, index) in ruleForm.sort2"
                :key="item.level3Name"
              >
                {{ item.level3Name }}
                <i class="el-icon-error" @click="delectProduct(index)"
              /></el-button>
            </span>
            <el-button type="primary" class="is-plain" @click="addYQ"
              >+ 新增</el-button
            >
          </el-form-item>
          <el-form-item label="领域分类:" prop="sort11">
            <span class="list_body">
              <el-button
                class="list-item"
                v-for="(item, index) in ruleForm.sort1"
                :key="item.level2Name"
                >{{ item.level2Name
                }}<i class="el-icon-error" @click="delectdomin(index)"
              /></el-button>
            </span>
            <el-button type="primary" class="is-plain" @click="addLY"
              >+ 新增</el-button
            >
          </el-form-item>
          <el-form-item label="绑定会议:">
            <el-input
              v-model="ruleForm.midTitle"
              maxlength="40"
              show-word-limit
              disabled
              placeholder="请输入会议名称"
              class="w420"
              size="small"
            />
            <div class="meet_ms">
              用于绑定已进行的会议/报告，用户可从会议页面直接跳转至视频回放页，<span
                style="color: #f59a23"
              >
                若绑定了会议则不会消耗自助上传视频权限，无法获取授权用户信息</span
              >
            </div>
          </el-form-item>
        </div>
      </div>
      <div id="second" class="target-fix" />
      <div class="essentialInformation mt10">
        <p class="essentialInformation_text mt10">视频内容</p>
        <div class="form">
          <el-form-item label="上传视频:" prop="newccvid">
            <div>
              <el-button :type="message=='点击上传'?'primary':'warning'">{{message}}</el-button>
              <span
                class="btn btn-primary fileinput-button submit_bt"
                @click="initCC"
              >
                <i class="glyphicon glyphicon-plus"></i>
                <span>上传视频</span>
                <!-- 单选文件 -->
                <input type="file" name="files" />
                <!-- 可多选文件 -->
                <!-- <input type="file" name="files[]" directory multiple /> -->
              </span>
            </div>
            <div style="position: relative">
              <div class="ts_wx2">
                支持常用的视频格式（如mp4、mov、webm、fiv、f4v),视频的大小不超过500M
                <br />
                选择文件后，可能出现短暂卡顿，请耐心等待
              </div>
            </div>
            <div class="updiv mt1" v-show="loading">
              <table
                class="uptable table table-striped table-hover"
                style="text-align: center"
              >
                <thead>
                  <tr>
                    <th style="width: 120px; text-align: left">文件名</th>
                    <th style="width: 80px; text-align: center">格式</th>
                    <th style="width: 0px; text-align: center"></th>
                    <th style="width: 80px; text-align: center">大小</th>
                    <th style="width: 120px; text-align: center">状态</th>
                    <th style="width: 125px; text-align: center">操作</th>
                    <th style="display: none"></th>
                  </tr>
                </thead>
                <tbody class="files"></tbody>
              </table>
            </div>
          </el-form-item>
          <el-form-item label="视频封面:" prop="cover">
            
              <ImgList
              v-model="ruleForm.cover"
              :limit="limitImg"
              :image="ruleForm.cover ? ruleForm.cover : ''"
              @imgListSucenss="imgListSucenss"
              @imgListDelete="imgListDelete"
            />
            <span class="ts_wx2">图片尺寸：640*360，大小1M,格式：PNG,JPG</span>
         
        
          </el-form-item>
          <el-form-item
            label="相关资料:"
            style="width: 800px"
          >
            <el-upload
              class="upload-excel"
              action="https://fileapi.instrument.com.cn/upflash/upfiles.ashx?colname=webinar"
              :on-remove="handleRemove"
              :before-upload="beforExcelUpload"
              :before-remove="beforeRemove"
              :limit="1"
              :on-exceed="handleExceed"
              :on-success="handleExcelSuccess"
              :file-list="fileList"
              accept=".pdf,.docx,.doc,.xls,.xlsx,.ceb"
            >
              <el-button type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传word、Excel、pdf文件，且不超过10M
              </div>
            </el-upload>
          </el-form-item>
        </div>
      </div>
      <div id="third" class="target-fix" />
      <div class="essentialInformation mt10 pd50">
        <p class="essentialInformation_text mt10">相关设置</p>
        <div class="form">
          <span class="last_label">
            <span style="color: red">*</span> 信息收集表设置:
            </span>
          <el-form-item prop="collection">
            <el-radio-group v-model="ruleForm.collection">
              <div class="mb16">
                <el-radio :label="2"
                  >手机号登录</el-radio
                >
              </div>
              <div>
                <el-radio :label="1"
                  >手机号登录+姓名邮箱单位名称</el-radio
                >
              </div>
            </el-radio-group>
          </el-form-item>
          <span class="last_label">
             相关标签:
             <el-tooltip class="item" effect="dark" content="添加标签后，可以对视频进行分类显示" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-form-item >
            <el-select v-model="ruleForm.labelId" placeholder="请选择">
              <el-option
                v-for="item in labelData"
                :key="item.id"
                :label="item.labelName"
                :value="item.id">
              </el-option>
            </el-select>
          <el-button type="primary" class="ml16" plain @click="dialogLabel=true;labeltitle=''">+新增视频标签</el-button>
          </el-form-item>

          <span class="last_label">
             关联仪器:
             <el-tooltip class="item" effect="dark" content="设置为仪会通会员服务，可在视频详情页展示1台关联仪器" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-form-item >
            <span class="list_body">
              <el-button v-if="ruleForm.product!=null && ruleForm.product.productName!=null && ruleForm.product.productName!='' "
                class="list-item">
                {{ ruleForm.product.productName }}
                <i class="el-icon-error" @click="delectProduct()"/></el-button>
            </span>
            <el-button type="primary" class="is-plain" v-if="ruleForm.product==null || ruleForm.product.productName==null || ruleForm.product.productName=='' " @click="addProduct"
              >+ 选择仪器</el-button
            >
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="btm_btn">
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    </div>
    <!-- 仪器分类 -->
    <el-dialog title="选择分类" :visible.sync="isProductDialog" width="650px">
      <addMainproduct
        @confirmProductsList="getConfirmProductsList"
        :sort-type="0"
      />
    </el-dialog>
    <!-- 领域分类 -->
    <el-dialog title="选择分类" :visible.sync="isDomainDialog" width="650px">
      <addDomainclass
        @confirmProductsList="getConfirmProductsList2"
        :sort-type="0"
      />
    </el-dialog>
    <el-dialog title="请选关联的仪器" :visible.sync="isProductListDialog" @close="closeProductListDialog()" width="950px" >
      <addProductList 
      @confirmProductsList="getConfirmProductsList3"
      :isOpened='isProductListDialog'/>
    </el-dialog>
    <!-- 新增标签 -->
    <el-dialog
  title="新增标签"
  :visible.sync="dialogLabel"
  width="420px">
  <div>
    <div class="dia_label">标签名称:</div>
    <el-input v-model="labeltitle" placeholder="请输入标签名称"  maxlength="8" show-word-limit></el-input>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogLabel = false">取 消</el-button>
    <el-button type="primary" @click="addLabel()">确 定</el-button>
  </span>
</el-dialog>
    <script id="template-upload" type="text/x-tmpl">
      {% for (var i=0, file; file=o.files[i]; i++) { %}
          <tr class="template-upload">
              <td style="width:120px;">
                  <p class="name" style="margin-top: 6px;text-align:left">{%=file.name%}</p>
                  <strong class="error text-danger"></strong>
              </td>
                    <td>
                       <p  style="margin-top: 6px;">{%=file.extendName%}</p>
                    </td>
                    <td>
                       <p  style="margin-top: 6px;" title="{%=file.categoryDesc%}">{%=file.shortCategoryDesc%}</p>
                    </td>
              <td style="width:80px;">
                  <p class="size" style="margin-top: 6px;">处理中...</p>
              </td>
      		<td class="progressbar">
      			<div style="margin-top:6px;margin-bottom:4px;margin-left: 20px;width:150px;display:inline-block;" class="progress progress-striped active mb0 tc_rel" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
      				<div class="progress-bar progress-bar-success" style="width:0%;"></div>
      				<div style="margin-top: 1px;" class="tc tc_pos upload_percent progress-u">0%</div>
      			</div>
      			<span class="rate" style="vertical-align:super; margin-top:6px; margin-left: 20px;display:inline-block;"></span>
      		</td>
              <td style="" class="operate">
                  {% if (!i && !o.options.autoUpload) { %}
                      <button class="btn btn-primary btn-xs start" style="margin-top:3px;" disabled>
                          <i class="glyphicon glyphicon-upload"></i>
                          <span>开始上传</span>
                      </button>
                  {% } %}
                  {% if (!i) { %}
                      <button class="btn btn-warning btn-xs cancel" style="margin-top:3px;">
                          <i class="glyphicon glyphicon-ban-circle"></i>
                          <span>取消</span>
                      </button>
                  {% } %}
      			{% if (!i) { %}
                      <button class="btn btn-primary btn-xs" id="pause" style="margin-top:3px;" disabled>
                          <i class="glyphicon glyphicon-ban-circle"></i>
                          <span>暂停</span>
                      </button>
                  {% } %}
      			{% if (!i) { %}
                      <button class="btn btn-primary btn-xs" id="resume" style="display:none; margin-top:3px;">
                          <i class="glyphicon glyphicon-upload"></i>
                          <span>续传</span>
                      </button>
                  {% } %}
              </td>
      		<td width="0%" style="display:none">
                  <input id="isPause" value="false">
              </td>
          </tr>
      {% } %}
    </script>
    
  </div>
</template>

<script>
import ImgList from "@/components/imgUpload";
import addMainproduct from "./components/addMainproducts.vue";
import addDomainclass from "./components/addDomainclass.vue";
import addProductList from "./components/addProductList.vue";
import api from "@/api/index.js";
import $ from "jquery";
export default {
  data() {
    return {
      activeName: "first",
      isfixed:false,
      dialogLabel:false,
      productData: [],
      DomainData: [],
      ImgList: [],
      message:'点击上传',
      labeltitle:'',
      zzupload:'自助上传',
      //提交表单
      ruleForm: {
        title: "",
        videoIntroduction: "",
        sort11: "",
        sort22: "",
        sort1: [],
        sort2: [],
        collection: "",
        newccvid: "",
        sizes: "",
        type: "INSERT",
        videoId: "",
        cover: "",
        videoFile: {},
        videoFilekey: "",
        mid: 0, //会议id
        // midTitle:'' //会议名称
        labelId:'',//标签
        videoSource:2,
        product:{},
      },
      fileList: [],
      limitImg: 1,
      isProductDialog: false,
      isDomainDialog: false,
      isProductListDialog:false,
      loading: false,
      excelName: "",
      excelUid: "",
      rules: {
        title: [{ required: true, message: "请输入视频名称", trigger: "blur" }],
        videoIntroduction: [
          { required: true, message: "请输入视频简介描述", trigger: "blur" },
        ],
        collection: [
          {
            required: true,
            message: "请选择设置",
            trigger: "change",
          },
        ],
        newccvid: [{ required: true, message: "请上传视频", trigger: "blur" }],
        cover: [{ required: true, message: "请上传封面", trigger: "blur" }],
        sort22: [
          { required: true, message: "请选择产品分类", trigger: "blur" },
        ],
        sort11: [
          { required: true, message: "请选择领域分类", trigger: "blur" },
        ],
      },
      labelData:[],
      productList:[],
    };
  },
  components: {
    ImgList,
    addMainproduct,
    addDomainclass,
    addProductList,
  },
  mounted(){
    window.addEventListener("scroll", this.scrolling);
    if (this.$route.query.id) {
      this.getvideoInfoById()
    }
    if (this.$route.query.mid) {
      this.ruleForm.videoSource=5
      this.zzupload='自助会议'
      this.ruleForm.mid=this.$route.query.mid
      this.ruleForm.midTitle=this.$route.query.title
    }
    this.getLabelData()
  },

  methods: {
    addLabel(){
       if(this.labeltitle==''){
        this.$message({type:'error',message:'请输入标签名'})
        return false
       }
       let form={
        labelName:this.labeltitle
       }
         api.video.getSaLabel(form).then(res=>{
            this.$message({type:'seccess',message:'新增成功！'})
            this.dialogLabel=false
            this.getLabelData()
         })
    },
    getLabelData(){
      let form={
        username:this.$store.getters.imShowId
      }
      api.video.getLabelList(form).then(res=>{
         this.labelData=res.data
      })
    },
    getProductListByImlistid(data){
      api.common.getProductListByImlistid(data).then(res=>{
         this.productList=res.data
      })
    },
    //获取视频想起
    getvideoInfoById(){
      let form={
        videoId :this.$route.query.id
      }
     api.video.videoInfoById(form).then(res=>{
      if(res.code==200){
        this.ruleForm.title=res.data.title
        this.ruleForm.videoIntroduction=res.data.summary

        this.ruleForm.sort11='get'
        this.ruleForm.sort22='get'

        this.ruleForm.collection=res.data.isCollection

        this.ruleForm.videoId=res.data.videoid

        this.ruleForm.midTitle=res.data.midTitle
        this.ruleForm.mid=res.data.mid

        this.ruleForm.sort1=res.data.sort1
        this.ruleForm.sort2=res.data.sort2

        this.ruleForm.videoFile=res.data.videoFile
        this.ruleForm.videoFilekey='get'

        this.ruleForm.cover=res.data.cover

        this.ruleForm.newccvid=res.data.newccvid
        this.ruleForm.sizes=res.data.sizes
        this.ruleForm.labelId=res.data.labelId
        this.ruleForm.product=res.data.product
        this.fileList.push({...res.data.videoFile,
                            name: res.data.videoFile.title })
        this.message='重新上传'
      }
      if(this.ruleForm.product){
        this.isProductChoose=true
        this.isProductNameVisible=false
      }else{
         this.isProductChoose=false
          this.isProductNameVisible=true
      }
     })
    },
    scrolling(){
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
        if(scrollTop>=16){
          this.isfixed=true
        }else{
          this.isfixed=false
        }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.$route.query.id){
            delete this.ruleForm.type
          }
          api.video.uploadVideo(this.ruleForm).then((res) => {
            if(this.$route.query.id){
              this.$message({ type: "success", message: "更新成功！" });
          }else{
            this.$message({ type: "success", message: "新增成功！" });
          }
           this.$router.push('/video/videolist')
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    addLY() {
      this.isDomainDialog = true;
    },
    addYQ() {
      this.isProductDialog = true;
    },
    addProduct(){
      this.isProductListDialog = true;
    },
    delectProduct(indexs) {
      this.ruleForm.sort2 = this.ruleForm.sort2.filter((item, index) => {
        if (index != indexs) {
          return item;
        }
      });
      //为校验
      if(this.ruleForm.sort2.length==0){
        this.ruleForm.sort22=''
      }
    },
    delectdomin(indexs) {
      this.ruleForm.sort1 = this.ruleForm.sort1.filter((item, index) => {
        if (index != indexs) {
          return item;
        }
      });
       //为校验
      if(this.ruleForm.sort1.length==0){
        this.ruleForm.sort11=''
      }
    },
    delectProduct(){
      if(this.ruleForm.product!=null)
      this.ruleForm.product = null
    },
    //仪器筛选
    getConfirmProductsList(val) {
      let form = {
        level1Id: val[0].onesortid,
        level1Name: val[0].onesortname,
        level2Id: val[0].twosortid,
        level2Name: val[0].twosortname,
        level3Id: val[0].threesortid,
        level3Name: val[0].threesortname,
        type: 2,
      };
      this.ruleForm.sort2.push(form);
      this.ruleForm.sort22 = "get";
      this.isProductDialog = false;
    },
    // 领域筛选
    getConfirmProductsList2(val) {
      let form = {
        level1Id: val[0].onesortid,
        level1Name: val[0].onesortname,
        level2Id: val[0].twosortid,
        level2Name: val[0].twosortname,
        type: 1,
      };
      this.ruleForm.sort1.push(form);
      this.ruleForm.sort11 = "get";
      this.isDomainDialog = false;
    },
    getConfirmProductsList3(val) {
      console.log("param",val);
      this.ruleForm.product = val;
      this.isProductListDialog = false;
      // api.video.bindProductToVideo(val).then(res=>{
      //     this.$message({type:'success',message:'绑定成功'})
      //     this.isProductListDialog = false;
      //     // this.$emit('reflash',true)
      // })
    },
    closeProductListDialog(){
      this.isProductListDialog =false;
    },
    //上传视频
    initCC() {
      const that = this;
      new CCH5Uploader({
        timeout: 180000, // 设置超时处理时间 超时时间3分钟 超时会重试
        maxChunkSize: 1024 * 1024, // 1M 最大不超过4M
        limitConcurrentUploads: 1, // 并发上传文件数
        maxRetries: 10, // 文件上传失败重试次数,默认10次
        retryTimeout: 500, // 重试延迟时间（毫秒）
        autoUpload: true, // 是否添加文件后自动上传
        fileInput: $("#fileupload").find("input[type='file']"), // 文件输入组件，必需要有的配置,可以是多个
        filesContainer: $(".files"), // 上传文件记录显示的容器
        // 重写获取分类名的方法,没有分类时不需要配置或者返回null
        getCategoryName: function () {
          var hasCategory = $("#uploadCategory").length > 0;
          if (!hasCategory) {
            return null;
          }
          return $("#selectCategoryInput").attr("title");
        },
        // 重写获取分类id的方法,没有分类时不需要配置或者返回null
        getCategoryId: function () {
          var hasCategory = $("#uploadCategory").length > 0;
          if (!hasCategory) {
            return null;
          }
          return $("#uploadCategory").val();
        },
        // 上传失败重试指定次数后依然失败后的回调
        uploadFail: function (recordNode, fileName, failMsg) {
          errorMsgHandler(
            getShortStr(fileName, 10) +
              "文件上传失败,原因：" +
              errorInfo(failMsg)
          );
          if (recordNode.find(".rate").length > 0) {
            if (recordNode.find("#pause").css("display") != "none") {
              recordNode.find("#pause").click();
            }
            // 有暂停操作的示例
            recordNode
              .find(".rate")
              .html(
                '<div class="tc" style="margin-top:6px;color:red;">上传失败</div>'
              );
          } else {
            // 无暂停操作的示例
            recordNode
              .find(".start")
              .parent()
              .append('<span style="color:red;">上传失败</span>');
          }
        },
        // 上传成功回调,可不做任何处理
        uploadSuccess: function (recordNode, fileName, ccvid) {
          that.hasVideo = true;
        },

        // 生成视频信息
        createuploadinfo: function (fileName, fileSize, categoryId) {
          var video = {};
          var encodeFileName = encodeURIComponent(fileName);
          //// //console.log(encodeFileName, "encodeFileName");
          var d = {
            // title: encodeFileName,
            filename: encodeFileName,
            filesize: fileSize,
            category1: "1",
            category2: "53",
          };

          //默认分类时不传分类id参数
          if (!!categoryId && categoryId != 0) {
            d.categoryid = categoryId;
          }
          $.ajax({
            url: "/api/webinar/newapi/video/getUploadVideoInfo",
            async: false, //必须以同步的方式执行，否则后续操作拿不到接口返回的数据, 这不影响文件的并发上传。
            type: "get",
            data: d,
            cache: false,
            dataType: "json",
            contentType: "application/json;charset=UTF-8",
            error: function () {
              video = {
                errMsg: "获取视频文件vid出错",
                errorType: "network",
              };
            },
            success: function (data) {
              that.loading = true;
              if (data.errMsg) {
                video.errMsg = data.errMsg;
                return;
              }
              video.success = true;
              video.uid = data.userid;
              video.ccvid = data.ccvid;
              video.servicetype = data.servicetype;
              video.name = data.name;
              video.uri = data.chunkurl;
              video.metauri = data.metaurl;
              video.size = data.size;
              that.videoData = data;
              that.ruleForm.newccvid = data.ccvid
                ? data.ccvid
                : "test1234";
                that.ruleForm.sizes = data.size,
                that.ruleForm.name = data.name,
                //console.log(that.videoData, "1234");
                this.message='重新上传'
            },
          });
          return video;
        },
      });
      /** *
       * 错误状态码
       */
      function errorInfo(errStr) {
        var hintstr = "";
        switch (errStr.toUpperCase()) {
          case "INVALID_REQUEST":
            hintstr = "用户输入参数错误";
            break;
          case "SPACE_NOT_ENOUGH":
            hintstr = "用户剩余空间不足";
            break;
          case "SERVICE_EXPIRED":
            hintstr = "用户服务终止";
            break;
          case "PROCESS_FAIL":
            hintstr = "服务器处理失败";
            break;
          case "TOO_MANY_REQUEST":
            hintstr = "访问过于频繁";
            break;
          case "PERMISSION_DENY":
            hintstr = "用户服务无权限";
            break;
        }
        return hintstr;
      }
      /** *****************************************************************************
       * 加载分类
       */
      window.onbeforeunload = function (e) {
        if ($(".progress.progress-striped.active.mb0.tc_rel").length) {
          return "视频上传中，离开页面将无法继续上传？";
        } else {
          if (!window.event) {
            return null;
          }
        }
      };

      function getShortStr(str, maxLen) {
        if (typeof str !== "string" || str.length <= maxLen) {
          return str;
        }
        return str.substr(0, maxLen) + "...";
      }

      function errorMsgHandler(msg) {
        alert(msg);
      }
    },
    imgListSucenss(data) {
      this.ImgList.push(JSON.parse(JSON.stringify(data)));
      this.ruleForm.cover = "https://img1.17img.cn/17img" + data.url;
    },
    imgListDelete(i) {
      this.ImgList.splice(i, 1);
      this.ruleForm.cover = "";
    },
    handleClick(tab, event) {
       var anchor = document.getElementById(tab.name)
      // chrome
      document.body.scrollTop = anchor.offsetTop-75
      // firefox
      document.documentElement.scrollTop = anchor.offsetTop-75
    },
    handleRemove(file, fileList) {
      if (file.status === "success") {
        for (let i = 0; i < this.fileList.length; i++) {
          if (file.uid === this.fileList[i].uid) {
            this.fileList.splice(i, 1);
          }
        }
      }
      this.ruleForm.videoFile={}
      if (file.status === "ready") {
        // 这里应该就是before-upload中返回false时的状况了，还有没有别的状况，未知
      }
    },
    beforExcelUpload(file) {
      //   const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 10MB!");
      }
      this.excelUid = file.uid;
      this.excelName = file.name;
      return isLt2M;
    },
    beforeRemove(file, fileList) {
      if (file && file.status === "success") {
        return this.$confirm(`确定移除 ${file.name}？`);
      }
    },
    handleExceed(files, fileList) {
      //   this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    handleExcelSuccess(res) {

      let excelObj = {
        filetype: res.filetype,
        url: "https://img1.17img.cn/17img" + res.url,
        uid: res.uid,
        size: res.size,
        title: res.original,
      };
      if (this.ruleForm.videoId!=null||this.ruleForm.videoId!='') {
        excelObj.videoId=this.ruleForm.videoId
      }
      this.ruleForm.videoFile = JSON.parse(JSON.stringify(excelObj));
      this.ruleForm.videoFilekey = "get";
    },
  },
};
</script>

<style lang="scss" scoped>
.dia_label{
  font-size: 14px;
    font-weight: 400;
    color: #4F5862;
    line-height: 16px;
    margin-bottom: 13px;
}
.ts_wx2 {
  line-height: 25px;
  font-size: 12px;
  color: $c7e;
  margin-top: 10px;
}
.list_body .list-item {
  padding: 8px 20px;
  font-weight: 400;
  background: #f0f3f7;
  border: 1px solid #e5eaf0;
  color: #202933;
  font-size: 14px;
  line-height: 1;
  margin-right: 16px;
  margin-bottom: 16px;
  margin-left: 0;
  i {
    color: #7e8790;
    margin-left: 14px;
    font-size: 14px;
  }
}
.el-button--primary.is-plain:active {
  background: #0b72da;
  border-color: #0b72da;
  color: #fff;
  outline: 0;
}
.meet_ms {
  margin-top: 10px;
  color: $c7e;
}
.el-button--primary.is-plain:focus,
.el-button--primary.is-plain:hover {
  background: #0c7ff2;
  border-color: #0c7ff2;
  color: #fff;
}
.mt75{
  margin-top: 75px;
}
.instrument-edit-ruleForm::v-deep .el-form-item__label {
  color: #202933;
}
.instrument-edit-ruleForm::v-deep .el-form-item {
  margin-bottom: 32px;
}
.instrument-edit-ruleForm::v-deep .el-form-item:last-child {
  margin-bottom: 0;
}
.instrument-edit-ruleForm::v-deep .formItemInner {
  margin-bottom: 0;
}
.instrument-edit-ruleForm::v-deep .el-form-item__content {
  line-height: 32px;
}
.instrumentListBox {
  // width: 1436px;
  box-shadow: inset 0px -1px 0px 1px #dde2e8;
  padding: 16px;
  background: #f5f8fc;
  margin: 0 auto;
}
.essentialInformation {
  // width: 1404px;
  padding-bottom: 15px;
  background: #ffffff;
  padding-top: 8px;
  padding-left: 16px;
  margin: 0 16px;
}
.essentialInformation_text {
  font-size: 16px;
  font-weight: bold;
  line-height: 30px;
  margin: 0;
}
.hint {
  font-size: 12px;
  font-weight: 400;
  color: #b9c0c7;
  line-height: 14px;
  margin-bottom: 0;
  margin-top: 6px;
}
.w420 {
  width: 420px;
}
.w203 {
  width: 203px;
}
.mr14 {
  margin-right: 14px;
}
.parameter {
  padding-bottom: 15px;
  background: #ffffff;
}
.catalogue_textjiantou {
  margin: 0 10px;
}
.symbol {
  padding: 0 7px;
}
.parameterForm ::v-deep .capacity {
  width: 200px;
}
.checkButton {
  margin-left: 20px;
}
.apply {
  padding-bottom: 15px;
  background: #ffffff;
  margin-top: 16px;
}

.explain {
  padding-bottom: 15px;
  background: #ffffff;
}
.explainBox {
}
.tabs_fixed {
  margin-bottom: 0px;
  position: fixed;
  top: 34px;
  transition: top .30s;
  width: calc(100% - 296px);
  background: #fff;
  opacity: 1;
  z-index: 100;
  border-top: 1px solid #00152914;
}

.afterSale {
  width: 319px;
}
.redHint {
  font-size: 12px;
  font-weight: 400;
  color: #ff0000;
  line-height: 24px;
  margin-left: 111px;
}
.correlation {
  padding-bottom: 15px;
  background: #ffffff;
}
.model {
  padding-bottom: 15px;
  background: #ffffff;
}

.issue {
  width: 100%;
  height: 56px;
  background: #ffffff;
  box-shadow: 0px -4px 6px 1px rgba(0, 0, 0, 0.08);
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.issueBox {
  height: 33px;
}
.issueCheckBox {
  margin-right: 10px;
}
.ModifyClassification {
  font-size: 12px;
  font-weight: 400;
  // height: 24px;
  // line-height: 24px;
  color: #0c7ff2;
}
.catalogue_text {
  color: #202933;
}
.correlationContent ::v-deep .el-input {
  width: 750px;
  height: 53px;
}
.correlationContent ::v-deep .el-input__inner {
  width: 750px;
  height: 53px;
  padding-left: 167px;
  box-sizing: border-box;
}
.bindingItem {
  position: relative;
  margin-left: -25px;
}
.addBtn {
  position: absolute;
  left: 16px;
  top: 11px;
  z-index: 20;
}
.btm_btn {
  position: fixed;
  width: calc(100vw - 280px);
  left: 248px;
  bottom: 0;
  height: 50px;
  background: #fff;
  z-index: 1000;
  line-height: 50px;
  text-align: center;
}
.last_label {
  display: inline-block;
  margin-left: 166px;
  margin-bottom: 20px;
}
.correlationContent {
  margin-left: 61px;
}
.pd50 {
  padding-bottom: 80px;
}

.box {
  height: 60px;
}
.hint-text {
  font-size: 12px;
  font-weight: 400;
  color: #b9c0c7;
  line-height: 24px;
  margin-bottom: 0;
  margin-top: 6px;
}
.delete {
  margin-left: 15px;
  height: 32px;
}

.addModelUser {
  font-size: 12px;
  font-weight: 400;
  color: #4f5862;
  margin-left: 15px;
}
.addModelUser:hover {
  color: #0c7ff2;
}
.mobileTerminal {
  margin-left: -24px;
}
.editor {
  display: flex;
  margin-top: 20px;
}
.preview {
  width: 300px;
  background: #ccc;
  line-height: 30px;
  text-align: center;
  margin: 0;
}
.previewBox {
  margin-left: 18px;
  height: 589px;
  background: url("https://img1.17img.cn//ui/bimg/SH100000/yxt4/houtai/model.png")
    no-repeat;
  background-size: 100%;
  position: relative;
  width: 312px;
}
.w480 {
  width: 480px !important;
}
.w350 {
  width: 350px;
}
.submit_bt {
  margin-top: -10px;
  width: 100px;
  opacity: 0;
  z-index: 100;
  position: relative;
  left: -140px;
  top: 2px;
}
.medical {
  background: #f5f8fc;
  padding: 16px 0;
}
.myTabPage {
  position: sticky;
  top: 0px;
  background: #fff;
  z-index: 1888;
  .tab {
    padding: 10px 20px 0 20px;
  }
}

.useName {
  font-size: 12px;
  color: #0c7ff2;
}
.essentialSpan {
  font-size: 12px;
  font-weight: 400;
  color: #b9c0c7;
  line-height: 14px;
  margin-left: 8px;
}
.maohao {
  width: 20px;
  text-align: center;
  height: 32px;
}
.h24-btn {
  height: 24px;
  font-size: 12px;
  padding: 0 8px;
}
.target-fix {
  position: relative;
  top: -4px; // 偏移值
  display: block;
  height: 0;
  overflow: hidden;
}
.h36 {
  height: 36px;
}
.wmin {
  width: 150px;
}
.w300 {
  widows: 300px;
}
.videoLeft {
  width: 170px;
  border-right: 1px solid #e5eaf0;
}
.videoLeft-item {
  height: 44px;
  line-height: 44px;
  font-size: 14px;
  color: #202933;
  margin: 0;
  padding: 0 0 0 16px;
  cursor: pointer;
}
.videoLeft-item:hover {
  background: #f5f8fc;
}
.mt10 {
  margin-top: 10px;
}
.videoD::v-deep .el-dialog--center .el-dialog__body {
  padding: 0;
  border-bottom: 1px solid #e5eaf0;
}
.videoBox {
  padding: 10px 0;
}
.videoLeft .activeCascader {
  background: #f5f8fc;
}
.videoRight {
  padding: 10px 16px;
  height: 500px;
  overflow-y: auto;
}
.videoD::v-deep .el-table td,
.el-table th.is-leaf {
  border: none;
}
.instrumentList::v-deep .el-dialog__header {
  background: #f5f8fc;
  margin-bottom: 10px;
}
.instrumentList::v-deep .el-dialog__body {
  padding-top: 10px;
}
::v-deep .el-dialog__footer {
  padding-top: 0px;
  // border-top: 1px solid #e5eaf0;
}
::v-deep .el-dialog__header {
  background: #f5f8fc;
  text-align: left;
  font-size: 16px;
  color: #202933;
  padding: 11px 16px;
}
::v-deep .el-dialog__body {
  padding: 25px 25px 10px !important;
}
::v-deep .el-dialog__title {
  font-size: 16px;
}
.pcTips {
  font-size: 12px;
  color: #666;
  margin-top: 39px;
  margin-left: 10px;
}
.pcTipsIcon {
  width: 16px;
}
.pcTipsIcon-left {
  margin-left: 4px;
}
.pcTipsIcon-right {
}

</style>